<template>
  <div class="them-switch">
    <label class="label">
      <input type="checkbox" class="checkbox" />
      <div class="status"></div>
    </label>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.them-switch {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1001;
  .label {
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 2px solid #000;
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: -6px 6px 0 #000;
    box-sizing: border-box;
    transition: all 0.1s;

    &:active {
      box-shadow: 0px 0px #000;
      transform: translate(-6px, 6px);
    }

    .checkbox {
      display: none;

      &:checked + .status {
        width: 24px;
        height: 24px;
        box-shadow: inset -30px -30px 0 #000;
        top: 16px;
        left: 16px;
      }

      &:checked + .status::after {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #000;
        box-shadow:
          0 18px 0 -4px #000,
          18px 0 0 -4px #000,
          0 -18px 0 -4px #000,
          -18px 0 0 -4px #000,
          -12px 12px 0 -4px #000,
          -12px -12px 0 -4px #000,
          12px -12px 0 -4px #000,
          12px 12px 0 -4px #000;
        border-radius: 50%;
        position: absolute;
        top: 7px;
        left: 7px;
        box-sizing: border-box;
        animation: ani 0.4s ease-out forwards;
      }
    }

    .status {
      width: 30px;
      height: 30px;
      background-color: transparent;
      box-shadow: inset -12px -8px 0 #000;
      border-radius: 50%;
      position: absolute;
      top: 12px;
      left: 12px;
      box-sizing: border-box;
      transition: all 0.4s;
    }
  }
}

@keyframes ani {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
</style>
